<template>
    <!-- 侧边栏 -->
    <div class="bg-white transition-all duration-300 ease-in-out z-10 flex flex-col shadow-xl w-64">
        <nav class="flex-1 py-4">
            <ul class="space-y-1">
                <li class=" nav-link">
                    <a @click="gotoKnowledgeDoc"
                        class="menu-item-active flex items-center px-4 py-3 text-sm font-medium" :class="{
                            'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                            'bg-blue-100 text-blue-500': currentRoute.path === '/setting/knowledgeDoc'
                        }">
                        <i class="fa-solid fa-file-text w-6 text-center"></i>
                        <span class="ml-3">知识文档</span>
                    </a>
                </li>
                <li class=" nav-link">
                    <a @click="gotoDocSplitter"
                        class="flex items-center px-4 py-3 text-sm font-medium text-neutral-600 hover:bg-neutral-100 transition-custom"
                        :class="{
                            'flex items-center space-x-2 py-2 px-4 rounded-md text-gray-600 hover:bg-blue-100 hover:text-blue-500': true,
                            'bg-blue-100 text-blue-500': currentRoute.path === '/setting/docSplitter' || currentRoute.path === '/setting/splitterDisplay'
                        }">
                        <i class="fa-solid fa-book w-6 text-center"></i>
                        <span class="ml-3">文档切片</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const currentRoute = useRoute();

const gotoKnowledgeDoc = () => {
    router.push('/setting/knowledgeDoc');
}

const gotoDocSplitter = () => {
    router.push('/setting/docSplitter');
}
</script>

<style scoped>
.nav-link {
    cursor: pointer;
}
</style>